HTML Elements Showcase - Inline vs Block

In HTML, elements are broadly divided into two categories: block-level and inline. Block elements always start on a new line and take up the full width, while inline elements only take as much width as the content requires.

[Block Elements] [Inline Elements] [Comparison]

Block Elements

Explanation: <div> is a generic block-level container used to group elements.

This is a paragraph element.

Explanation: <p> defines a paragraph and always starts on a new line.

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5

Heading Level 6

Explanation: <h1>-<h6> are block elements for headings, taking full width.

• Unordered Item 1
• Unordered Item 2

Explanation: <ul> defines an unordered list (bulleted).

1. Ordered Item 1
2. Ordered Item 2

Explanation: <ol> defines an ordered list (numbered).

"Coding is the new literacy."

Explanation: <blockquote> is used for long quotations as a block element.

Explanation: <hr> defines a horizontal rule, a thematic break in content.

Explanation: <table> is a block-level element for tabular data.

Inline Elements

This is a span inside text.

Explanation: <span> is an inline container with no new line.

Visit Example Website.

Explanation: <a> defines a hyperlink inline.

This is bold text and this is strong text.

Explanation: <b> and <strong> highlight text inline (strong is semantic).

This is italic text and this is emphasized text.

Explanation: <i> and <em> display text in italics, inline.

This is underlined text.

Explanation: <u> underlines text inline.

E = mc²

Explanation: <sup> defines superscript inline.

H₂O

Explanation: <sub> defines subscript inline.

This is highlighted text.

Explanation: <mark> highlights text inline.

We use HTML every day.

Explanation: <abbr> defines abbreviations inline.

Example code: console.log("Hello World");

Explanation: <code> is inline for code snippets.

Inline vs Block Comparison

Back to Top